<template>
  <div class="h-100 position-relative bgcxy">
    <div class="h-100 position-absolute" style="top: 0; z-index: 1">
      <div class="h-100">
        <div id="container" style="height: 100%" />
      </div>
    </div>
    <index-header class="position-absolute" style="top: 0; z-index: 2" />
    <div class="gradients-left position-absolute">
      <div class="flex-column justify-between position-absolute" style="width: 69.5%; height: 98%; left: 3%; top: 0">
        <div data-bottom class="h-33">
          <!-- <page-header text="生产总值">
            <v-chart v-if="optionSczz.isShow" :options="optionSczz" />
          </page-header> -->
          <page-header text="养殖概况">
            <v-chart v-if="optionYzygk.isShow" :options="optionYzygk" />
          </page-header>
        </div>
        <div style="height: 1%" />
        <div data-bottom class="h-33">
          <page-header text="产奶量概况">
            <div style="height: 100%; margin-top: 15px">
              <v-chart v-if="optionZZFBXX.isShow" :options="optionZZFBXX" />
            </div>
          </page-header>
        </div>
        <div style="height: 1%" />
        <div data-bottom class="h-33">
          <!-- <div id="heatMap" style="height: 100%" /> -->
          <page-header text="乳制品生产量">
            <v-chart v-if="optionZscpzlzr.isShow" ref="zscpjzlzr" :options="optionZscpzlzr" />
          </page-header>
        </div>
      </div>
    </div>
    <div class="position-center topStyle position-absolute">
      <div :class="'topContent' + key" :style="{ height: height + 'px' }" @click="change(key)" v-for="(item, key) in expertsList" :key="key">
        <img :src="item.image" />
        <div>
          <p>{{ item.text }}</p>
          <p>
            <span>{{ item.num }}</span
            >{{ item.unit }}
          </p>
        </div>
      </div>
    </div>
    <div class="gradients-right position-absolute">
      <div class="flex-column justify-between position-absolute" style="width: 69.5%; height: 98%; right: 3%; top: 0">
        <div data-bottom class="h-33">
          <page-header text="新型经营主体">
            <!-- <v-chart v-if="optionXxjyzt.isShow" :options="optionXxjyzt" /> -->
            <v-chart v-if="optionNSYtrccb_fxc.isShow" ref="zscpjzlzr" :options="optionNSYtrccb_fxc" />
          </page-header>
        </div>
        <div style="height: 1%" />
        <div data-bottom class="h-33">
          <page-header text="疫情防控密度">
            <div class="shuiqiu">
              <div>
                <v-chart v-if="epidemicPrevention.isShow" :options="epidemicPrevention" />
                <v-chart v-if="epidemicPrevention2.isShow" :options="epidemicPrevention2" />
              </div>
              <div>
                <v-chart v-if="epidemicPrevention3.isShow" :options="epidemicPrevention3" />
                <v-chart v-if="epidemicPrevention4.isShow" :options="epidemicPrevention4" />
              </div>
            </div>
          </page-header>
        </div>
        <div style="height: 1%" />
        <div data-bottom class="h-33">
          <page-header text="饲料原料市场行情">
            <!-- <div style="height: 90%; margin-top: 30px">
              <v-chart :options="optionJRLLZB" />
            </div> -->
            <v-chart :options="optionJRLLZB" />
          </page-header>
        </div>
      </div>
    </div>
    <div class="gradients-bottomTitle position-absolute">
      <p><i></i> <span>万只羊场</span></p>
      <p><i style="background: #e9d017"></i> <span>千只羊场</span></p>
      <p><i style="background: #c26cfe"></i> <span>适度规模</span></p>
    </div>
    <div class="gradients-bottom" />
  </div>
</template>

<script>
const height = parseInt(window.document.body.clientWidth * 0.46 * 0.155)
import IndexHeader from 'header/IndexHeader3.vue'
import AMap from '@/utils/AMap'
import echarts from 'echarts'
import {
  homePagemap,
  getEchartsData,
  districts,
  cultivationEnterprise,
  atmospheric,
  getTowSideStat,
  getSingleValue,
  queryMainProductPriceTrend
} from '@/api/connector'
import theme from '@/utils/echarts-theme.json'
import { getDataAndRefresh } from '@/utils/echartsRefresh'
import PageHeader from 'header/PageHeader.vue'
import { formatNumber } from '@/utils/app'
import { createInfoWindow } from '@/utils/app'
import 'echarts-liquidfill/src/liquidFill.js'

var colors = [
  [
    {
      offset: 1,
      color: '#18D8B1'
    }
  ],
  [
    {
      offset: 1,
      color: 'rgba(36, 113, 210, 1)'
    }
  ],
  [
    {
      offset: 1,
      color: 'rgba(60, 181, 255, 1)'
    }
  ],
  [
    {
      offset: 1,
      color: 'rgba(102, 71, 255, 1)'
    }
  ]
]
const tooltip = function (a, b) {
  return {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    // formatter: '{b}<br />{a2}:{c2}%<br />{a1}:{c1}%<br />{a0}:{c0}%'
    formatter: function (params, ticket, callback) {
      var htmlStr = ''
      for (var i = 0; i < params.length; i++) {
        var param = params[i]
        var xName = param.name // x轴的名称
        var seriesName = param.seriesName // 图例名称
        var value = param.value[i + 1] // y轴值
        var color = param.color // 图例颜色
        if (i === 0) {
          htmlStr += xName + '<br/>' // x轴的名称
        }
        htmlStr += '<div>'
        htmlStr +=
          '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>' // 一个点
        htmlStr += seriesName + '：' + value + (i === 0 ? a : b) // 圆点后面显示的文本
        htmlStr += '</div>'
      }
      return htmlStr
    }
  }
}
const tooltips = function (a, b) {
  return {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    // formatter: '{b}<br />{a2}:{c2}%<br />{a1}:{c1}%<br />{a0}:{c0}%'
    formatter: function (params, ticket, callback) {
      var htmlStr = ''
      for (var i = 0; i < params.length; i++) {
        var param = params[i]
        var xName = param.name // x轴的名称
        var seriesName = param.seriesName // 图例名称
        var value = param.value // y轴值
        var color = param.color // 图例颜色
        if (i === 0) {
          htmlStr += xName + '<br/>' // x轴的名称
        }
        htmlStr += '<div>'
        htmlStr +=
          '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>' // 一个点
        htmlStr += seriesName + '：' + value + (i === 0 ? a : b) // 圆点后面显示的文本
        htmlStr += '</div>'
      }
      return htmlStr
    }
  }
}
export default {
  name: 'Test',
  components: {
    IndexHeader,
    PageHeader
  },
  data() {
    return {
      showFlag: true,
      height: height,
      menuLevel: 1,
      map: null,
      amap: '',
      infoWindow: null,
      p1: null,
      time: null,
      p2: null,
      p3: null,
      p4: null,
      heatMap: null,
      showIndex: 0,
      mapData: [],
      path: null,
      starCenter: [106.864404, 34.892985],
      expertsList: [
        {
          text: '养殖场',
          num: '',
          image: require('../../../assets/img/yzc.png'),
          unit: '个'
        },
        {
          text: '加工厂',
          num: '',
          image: require('../../../assets/img/jgc.png'),
          unit: '个'
        },
        {
          text: '奶山羊',
          num: '',
          image: require('../../../assets/img/nsy.png'),
          unit: '万只'
        }
      ],
      //饲料原料市场行情
      optionJRLLZB: {
        isShow: false,
        title: {},
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            var result = params[0].name + '<br>'
            params.forEach(function (item) {
              result += item.marker + item.seriesName + ' : ' + item.value + ' 元/吨</br>'
            })
            return result
          }
        },

        legend: {
          itemGap: 20,
          right: 15,
          top: 0,
          width: '60%',
          align: 'right',
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: '#E9F7FF',
            fontWeight: 400,
            fontSize: 14
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '2%',
          top: '24%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          // boundaryGap: false, // 坐标轴两边留白
          data: [],
          axisLabel: {
            // margin: 13,
            // lineHeight: 0,
            // padding: [0, 0, 10, 0],
            // 坐标轴刻度标签的相关设置。
            interval: 5, // 设置为 1，表示『隔一个标签显示一个标签』
            //	margin:15,
            textStyle: {
              color: '#ffffff',
              // fontStyle: 'normal',
              fontFamily: '微软雅黑',
              fontSize: 12
            },
            formatter: function (params) {
              var newParamsName = ''
              var paramsNameNumber = params.length
              var provideNumber = 10 // 一行显示几个字
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
              if (paramsNameNumber > provideNumber) {
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = ''
                  var start = p * provideNumber
                  var end = start + provideNumber
                  if (p == rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber)
                  } else {
                    tempStr = params.substring(start, end) + '\n'
                  }
                  newParamsName += tempStr
                }
              } else {
                newParamsName = params
              }
              return newParamsName
            }
            // rotate:50,
          },
          axisTick: {
            // 坐标轴刻度相关设置。
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#5C6D7C',
              width: 1
            }
          },
          splitLine: {
            // 坐标轴在 grid 区域中的分隔线。
            show: false,
            lineStyle: {
              color: '#ffffff'
              // 	opacity:0.1
            }
          }
        },
        yAxis: [
          {
            name: '元/吨',
            type: 'value',
            splitNumber: 5,
            nameTextStyle: {
              color: '#E9F7FF'
            },
            axisLabel: {
              textStyle: {
                color: '#ffffff',
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 12
              }
            },
            axisLine: {
              lineStyle: {
                color: '#5C6D7C',
                width: 1
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#5C6D7C',
                opacity: 0.5
              }
            }
          },
          {
            position: 'right',
            axisLine: {
              lineStyle: {
                color: '#5C6D7C'
              }
            }
          }
        ],
        series: []
      },
      //乳制品生产量
      optionZscpzlzr: {
        isShow: false,
        tooltip: tooltips('吨', '吨'),
        legend: {
          data: ['#3CB5FF', '#6647FF'],
          // orient: 'vertical',
          right: 15,
          top: 0,
          itemStyle: {
            color: '#3CB5FF'
          },
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: '#E9F7FF',
            fontWeight: 400,
            fontSize: 14
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '22%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: [],
          axisPointer: {
            type: 'shadow'
          },

          axisLine: {
            lineStyle: {
              color: '#5C6D7C',
              width: 1
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '吨',
            nameTextStyle: {
              color: '#E9F7FF'
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#5C6D7C'],
                width: 1,
                type: 'solid'
              }
            },
            nameTextStyle: {
              color: '#E9F7FF'
            },
            axisLine: {
              lineStyle: {
                color: '#5C6D7C',
                width: 1
              }
            }
          },
          {
            position: 'right',
            axisLine: {
              lineStyle: {
                color: '#5C6D7C'
              }
            }
          }
        ],
        series: []
      },
      //产奶量概况
      optionZZFBXX: {
        isShow: false,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: '{b}<br>{a}:{c}万吨'
        },
        legend: {
          data: []
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          top: '16%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: [],
          boundaryGap: false,
          axisPointer: {
            type: 'line'
          },
          axisLine: {
            lineStyle: {
              color: '#5C6D7C',
              width: 1
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '万吨',
            nameTextStyle: {
              color: '#E9F7FF'
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#5C6D7C'],
                width: 1,
                type: 'solid'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#5C6D7C',
                width: 1
              }
            }
          },
          {
            position: 'right',
            axisLine: {
              lineStyle: {
                color: '#5C6D7C'
              }
            }
          }
        ],
        series: [
          {
            name: '',
            type: 'line',
            itemStyle: {
              color: 'RGBA(110, 195, 245, 1)',
              width: 0.5
            },
            areaStyle: {
              normal: {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                //折线颜色
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: 'rgba(0, 182, 255, 0)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(0, 220, 255, 1)'
                  }
                ])
              }
            },
            data: []
          }
        ]
      },
      //新型经营主体
      optionNSYtrccb_fxc: {
        isShow: false,
        width: '93%',
        legend: {
          top: 0,
          right: 14,
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: '#E9F7FF',
            fontWeight: 400,
            fontSize: 14
          }
        },
        tooltip: tooltip('个', '个'),
        dataset: {
          source: [
            // ['product', '养殖企业', '合作社', '养殖户', '加工企业'],
            // ['2016', 430.3, 850.8, 930.7, 520],
            // ['2017', 830.1, 730.4, 550.1, 820],
            // ['2018', 860.4, 650.2, 820.5, 720],
            // ['2019', 720.4, 530.9, 390.1, 620],
            // ['2020', 720.4, 530.9, 390.1, 420]
          ]
        },
        grid: {
          left: '3%',
          right: '1%',
          bottom: '2%',
          top: '26%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#5C6D7C'
            }
          }
        },
        yAxis: [
          {
            name: '个',
            nameTextStyle: {
              color: '#fff'
            },
            axisLine: {
              lineStyle: {
                color: '#5C6D7C'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#5C6D7C'
              }
            },
            axisLabel: {
              color: '#E9F7FF',
              fontWeight: 'bold',
              fontSize: 13
            }
          },
          {
            position: 'right',
            axisLine: {
              lineStyle: {
                color: '#5C6D7C'
              }
            }
          }
        ],
        series: [
          {
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#00DCFF' },
                { offset: 1, color: 'rgba(0, 182, 255, 0)' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#9C52FF' },
                { offset: 1, color: 'rgba(156, 82, 255, 0)' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#18D8B1' },
                { offset: 1, color: 'rgba(24, 216, 177, 0)' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#E9D017 ' },
                { offset: 1, color: 'rgba(233, 208, 23, 0)' }
              ])
            }
          }
        ]
      },
      //水球图
      epidemicPrevention: {
        isShow: false,
        title: [
          {
            text: '',
            textStyle: {
              fontSize: 20,
              fontFamily: 'myfont',
              fontWeight: 'bold',
              color: '#fff',
              rich: {}
            },
            x: 'center',
            y: '42%'
          },
          {
            text: '',
            textStyle: {
              fontSize: 14,
              fontWeight: 'normal',
              color: '#fff',
              rich: {}
            },
            x: 'center',
            y: '27%'
          }
        ],
        //   graphic: [{
        //     type: 'group',
        //     left: 'center',
        //     bottom: '10%',
        //     children: [{
        //       type: 'text',
        //       z: 100,
        //       left: '10',
        //       top: 'middle',
        //       style: {
        //         fill: '#000',
        //         text: info[0].name,
        //         fontSize: 30
        //       }
        //     }]
        //   }],
        series: [
          {
            type: 'liquidFill',
            radius: '70%',
            center: ['50%', '40%'],
            data: [], // 水数量
            backgroundStyle: {
              opacity: 0.7,
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [
                  {
                    offset: 1,
                    color: '#11374A'
                  }
                ]
              }
              // globalCoord: false,
            },
            // 替换根据水位变化的标签
            label: {
              normal: {
                show: false
                // textStyle: {
                //   fontSize: 24,
                //   color: '#fff',
                // }
              }
            },
            // 隐藏外边框
            outline: {
              show: false,
              borderDistance: 0,
              itemStyle: {
                borderWidth: 0
              }
            },
            // 改变水颜色
            itemStyle: {
              opacity: 0.5,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: colors[0],
                globalCoord: false
              }
            },
            // hover水的style
            emphasis: {
              itemStyle: {
                opacity: 1
              }
            }
          }
        ]
      },
      epidemicPrevention2: {
        isShow: false,
        title: [
          {
            text: '',
            textStyle: {
              fontSize: 20,
              fontFamily: 'myfont',
              fontWeight: 'bold',
              color: '#fff',
              rich: {}
            },
            x: 'center',
            y: '42%'
          },
          {
            text: '',
            textStyle: {
              fontSize: 14,
              fontWeight: 'normal',
              color: '#fff',
              rich: {}
            },
            x: 'center',
            y: '27%'
          }
        ],
        series: [
          {
            type: 'liquidFill',
            radius: '70%',
            center: ['50%', '40%'],
            data: [], // 水数量
            backgroundStyle: {
              opacity: 0.7,
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [
                  {
                    offset: 1,
                    color: '#11374A'
                  }
                ]
              }
              // globalCoord: false,
            },
            // 替换根据水位变化的标签
            label: {
              normal: {
                show: false
                // textStyle: {
                //   fontSize: 24,
                //   color: '#fff',
                // }
              }
            },
            // 隐藏外边框
            outline: {
              show: false,
              borderDistance: 0,
              itemStyle: {
                borderWidth: 0
              }
            },
            // 改变水颜色
            itemStyle: {
              opacity: 0.5,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: colors[1],
                globalCoord: false
              }
            },
            // hover水的style
            emphasis: {
              itemStyle: {
                opacity: 1
              }
            }
          }
        ]
      },
      epidemicPrevention3: {
        isShow: false,
        title: [
          {
            text: '',
            textStyle: {
              fontSize: 20,
              fontFamily: 'myfont',
              fontWeight: 'bold',
              color: '#fff',
              rich: {}
            },
            x: 'center',
            y: '42%'
          },
          {
            text: '',
            textStyle: {
              fontSize: 14,
              fontWeight: 'normal',
              color: '#fff',
              rich: {}
            },
            x: 'center',
            y: '27%'
          }
        ],
        series: [
          {
            type: 'liquidFill',
            radius: '70%',
            center: ['50%', '40%'],
            data: [], // 水数量
            backgroundStyle: {
              opacity: 0.7,
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [
                  {
                    offset: 1,
                    color: '#11374A'
                  }
                ]
              }
              // globalCoord: false,
            },
            // 替换根据水位变化的标签
            label: {
              normal: {
                show: false
                // textStyle: {
                //   fontSize: 24,
                //   color: '#fff',
                // }
              }
            },
            // 隐藏外边框
            outline: {
              show: false,
              borderDistance: 0,
              itemStyle: {
                borderWidth: 0
              }
            },
            // 改变水颜色
            itemStyle: {
              opacity: 0.5,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: colors[2],
                globalCoord: false
              }
            },
            // hover水的style
            emphasis: {
              itemStyle: {
                opacity: 1
              }
            }
          }
        ]
      },
      epidemicPrevention4: {
        isShow: false,
        title: [
          {
            text: '',
            textStyle: {
              fontSize: 20,
              fontFamily: 'myfont',
              fontWeight: 'bold',
              color: '#fff',
              rich: {}
            },
            x: 'center',
            y: '42%'
          },
          {
            text: '',
            textStyle: {
              fontSize: 14,
              fontWeight: 'normal',
              color: '#fff',
              rich: {}
            },
            x: 'center',
            y: '27%'
          }
        ],
        series: [
          {
            type: 'liquidFill',
            radius: '70%',
            center: ['50%', '40%'],
            data: [], // 水数量
            backgroundStyle: {
              opacity: 0.7,
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [
                  {
                    offset: 1,
                    color: '#11374A'
                  }
                ]
              }
              // globalCoord: false,
            },
            // 替换根据水位变化的标签
            label: {
              normal: {
                show: false
                // textStyle: {
                //   fontSize: 24,
                //   color: '#fff',
                // }
              }
            },
            // 隐藏外边框
            outline: {
              show: false,
              borderDistance: 0,
              itemStyle: {
                borderWidth: 0
              }
            },
            // 改变水颜色
            itemStyle: {
              opacity: 0.5,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: colors[3],
                globalCoord: false
              }
            },
            // hover水的style
            emphasis: {
              itemStyle: {
                opacity: 1
              }
            }
          }
        ]
      },

      optionYzygk: {
        isShow: true,
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            var result = params[0].name + '<br>'
            params.forEach(function (item) {
              result += item.marker + item.seriesName + ' : ' + item.value + ' 万只</br>'
            })
            return result
          }
        },
        // legend: {
        //   right: 50,
        //   data: []
        // },
        legend: {
          data: [],
          // orient: 'vertical',
          right: 15,
          top: 0,
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: '#E9F7FF',
            fontWeight: 400,
            fontSize: 14
          },
          itemStyle: {
            color: '#3CB5FF'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '1%',
          top: '30%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: [],
          axisPointer: {
            type: 'shadow'
          },

          axisLine: {
            lineStyle: {
              color: '#5C6D7C',
              width: 1
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '万只',
            nameTextStyle: {
              color: '#E9F7FF'
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#5C6D7C'],
                width: 1,
                type: 'solid'
              }
            },
            nameTextStyle: {
              color: '#E9F7FF'
            },
            axisLine: {
              lineStyle: {
                color: '#5C6D7C',
                width: 1
              }
            }
          },
          {
            position: 'right',
            axisLine: {
              lineStyle: {
                color: '#5C6D7C'
              }
            }
          }
        ],
        series: []
      },
      // 定时器
      timer1: null,
      timer2: null,
      timer3: null,
      timer4: null,
      timer5: null,
    }
  },
  mounted() {
    
    this.$nextTick(() => {
      this.initAMap(10)
      this.initialize()
    })
  },
  created() { 
  },
  beforeDestroy() {
    clearTimeout(this.time)
  },
  destroyed(){
    clearInterval(this.timer1)
    clearInterval(this.timer2)
    clearInterval(this.timer3)
    clearInterval(this.timer4)
    clearInterval(this.timer5)
  },
  methods: {
    laterRequest(){
      this.timer1 = getDataAndRefresh(this.getEchartsData01)
      this.timer2 = getDataAndRefresh(this.getEchartsData02)
      this.timer3 = getDataAndRefresh(this.getEchartsData03)
      this.timer4 = getDataAndRefresh(this.getEchartsData04)
      this.timer5 = getDataAndRefresh(this.getEchartsData05)
    },
    initialize(){
      // this.getEchartsData01()
      // this.getEchartsData02()
      // this.getEchartsData03()
      // this.getEchartsData04()
      // this.getEchartsData05()
      //顶部数据
    homePagemap().then((res) => {
      if (res.status == 0) {
        let val = res.data
        this.expertsList[0].num = val.yzcData
        this.expertsList[1].num = val.jgcqy
        this.expertsList[2].num = val.nsy
        this.laterRequest()
            //疫病防控密度
      getEchartsData('DATA_TYPE_EPIDEMIC_PREVENTION_AND_CONTROL_DENSITY', 1, 1, 'dataDate', 'desc').then((res) => {
      if (res.status == 0) {
        const val = res.data.rows[0]
        console.log(res,'疫情防控密度')
        this.epidemicPrevention.title[0].text = val.c_1 + '%'
        this.epidemicPrevention.title[1].text = '口蹄疫'
        this.epidemicPrevention.series[0].data = [parseInt(val.c_1) / 100, parseInt(val.c_1) / 100]
        this.epidemicPrevention2.title[0].text = val.c_2 + '%'
        this.epidemicPrevention2.title[1].text = '小反刍受疫'
        this.epidemicPrevention2.series[0].data = [parseInt(val.c_2) / 100, parseInt(val.c_2) / 100]
        this.epidemicPrevention3.title[0].text = val.c_3 + '%'
        this.epidemicPrevention3.title[1].text = '三联四防'
        this.epidemicPrevention3.series[0].data = [parseInt(val.c_3) / 100, parseInt(val.c_3) / 100]
        this.epidemicPrevention4.title[0].text = val.c_4 + '%'
        this.epidemicPrevention4.title[1].text = '羊痘'
        this.epidemicPrevention4.series[0].data = [parseInt(val.c_4) / 100, parseInt(val.c_4) / 100]
        this.epidemicPrevention.isShow = true
        this.epidemicPrevention2.isShow = true
        this.epidemicPrevention3.isShow = true
        this.epidemicPrevention4.isShow = true
      }
    })
      }
    })
    },
    //饲料原料市场行情
    getEchartsData05() {
      this.optionJRLLZB.xAxis.data = []
      if (this.optionJRLLZB.series.length > 0) {
        this.optionJRLLZB.series[0].data = []
        this.optionJRLLZB.series[1].data = []
        this.optionJRLLZB.series[2].data = []
        this.optionJRLLZB.series[3].data = []
        this.optionJRLLZB.series[4].data = []
      }
      getEchartsData('DATA_TYPE_FEED_RAW_MATERIAL_MARKET',1,30, 'dataDate','desc').then((res) => {
        if (res.status == 0) {
          const val = res.data.rows.reverse()
          this.optionJRLLZB.xAxis.data = val.map((item) => item.dataDateStr)
          let seriesResult = []
          let data = {
            玉米: val.map((item) => item.c_1),
            苜蓿: val.map((item) => item.c_2),
            燕麦草: val.map((item) => item.c_3),
            青贮: val.map((item) => item.c_4),
            豆粕: val.map((item) => item.c_5)
          }
          let typeSet = ['玉米', '苜蓿', '燕麦草', '青贮', '豆粕']
          for (const i in typeSet) {
            seriesResult.push({
              name: typeSet[i],
              type: 'line',
              data: data[typeSet[i]],
              symbolSize: 8,
              symbol: 'emptyCircle',
              itemStyle: {
                normal: {
                  label: {
                    show: false
                  }
                }
              }
            })
          }
          this.optionJRLLZB.series = seriesResult
          this.optionJRLLZB.isShow = true
        }
      })
    },
    //乳制品生产量
    getEchartsData04() {
      this.optionZscpzlzr.xAxis.data = []
      if (this.optionZscpzlzr.series.length > 0) {
        this.optionZscpzlzr.series[0].data = []
        this.optionZscpzlzr.series[1].data = []
      }
      getEchartsData('DATA_TYPE_OVERVIEW_OF_DAIRY_PRODUCTION').then((res) => {
        const val = res.data.rows.reverse()
        this.optionZscpzlzr.xAxis.data = val.map((item) => item.dataDateStr)
        this.optionZscpzlzr.legend.data = ['奶粉', '液态奶']
        let xspx = val.map((item) => item.c_1)
        let xxpx = val.map((item) => item.c_2)
        this.optionZscpzlzr.series = []
        this.optionZscpzlzr.series.push({
          name: '奶粉',
          type: 'bar',
          data: xspx,
          barWidth: '15%',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                { offset: 0, color: 'rgba(0, 182, 255, 0)' },
                { offset: 1, color: '#00DCFF' }
              ])
            }
          }
        })
        this.optionZscpzlzr.series.push({
          name: '液态奶',
          type: 'bar',
          data: xxpx,
          barWidth: '15%',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                { offset: 0, color: 'rgba(156, 82, 255, 0)' },
                { offset: 1, color: '#9C52FF' }
              ])
            }
          }
        })
        this.optionZscpzlzr.isShow = true
      })
    },
    //产奶量概况
    getEchartsData03() {
      this.optionZZFBXX.xAxis.data = []
      this.optionZZFBXX.series[0].data = []
      getEchartsData('DATA_TYPE_OVERVIEW_OF_MILK_YIELD').then((res) => {
        if (res.status == 0) {
          const val = res.data.rows.reverse()
          this.optionZZFBXX.xAxis.data = val.map((item) => item.dataDateStr)
          this.optionZZFBXX.series[0].name = '产奶量概况'
          this.optionZZFBXX.series[0].data = val.map((item) => item.c_1)
          this.optionZZFBXX.isShow = true
        }
      })
    },
    getEchartsData02() {
      //新型经营主体
      this.optionNSYtrccb_fxc.xAxis.data = []
      this.optionNSYtrccb_fxc.dataset.source = []
      getEchartsData('DATA_TYPE_NEW_BUSINESS_ENTITY').then((data) => {
        if (data.status == 0) {
          let val = data.data.rows.reverse()
          this.optionNSYtrccb_fxc.xAxis.data = val.map((item) => item.dataDateStr)
          this.optionNSYtrccb_fxc.dataset.source = [['product', '养殖企业', '合作社', '养殖户', '加工企业']]
          // dataset source
          val.map((item, index) => {
            this.optionNSYtrccb_fxc.dataset.source.push([item.dataDateStr, item.c_1, item.c_2, item.c_3, item.c_4])
          })
          this.optionNSYtrccb_fxc.isShow = true
        }
      })
    },
    //养殖概况
    getEchartsData01() {
      if (this.optionYzygk.series.length > 0) {
        this.optionYzygk.series[0].data = []
        this.optionYzygk.series[1].data = []
        this.optionYzygk.series[2].data = []
        this.optionYzygk.series[3].data = []
      }
      this.optionYzygk.xAxis.data = []
      getEchartsData('DATA_TYPE_BREEDING_OVERVIEW').then((data) => {
        if (data.status == 0) {
          let val = data.data.rows.reverse()
          this.optionYzygk.xAxis.data = val.map((item) => item.dataDateStr)
          this.optionYzygk.legend.data = ['泌乳羊', '种公羊', '青年羊', '羔羊']
          let typeValueListMap = {
            泌乳羊: val.map((item) => item.c_1),
            种公羊: val.map((item) => item.c_2),
            青年羊: val.map((item) => item.c_3),
            羔羊: val.map((item) => item.c_4)
          }
          let colors = ['rgba(24, 216, 177, 1)', 'rgba(36, 113, 210, 1)', 'rgba(60, 181, 255, 1)', 'rgba(102, 71, 255, 1)']
          this.optionYzygk.series = []
          Object.keys(typeValueListMap).forEach((item, index) => {
            this.optionYzygk.series.push({
              name: item,
              stack: ' ',
              type: 'bar',
              barWidth: '15%',
              data: typeValueListMap[item],
              itemStyle: {
                normal: {
                  color: colors[index]
                }
              }
            })
          })
          this.optionYzygk.isShow = true
        }
      })
    },
    drawLoca(data) {
      var layer = new Loca.HeatmapLayer({
        map: this.heatMap
      })
      var list = []
      var i = -1
      var length = data.length
      while (++i < length) {
        var item = data[i]
        list.push({
          coordinate: [item.lng, item.lat],
          count: item.count
        })
      }

      layer.setData(list, {
        lnglat: 'coordinate',
        value: 'count'
      })

      layer.setOptions({
        style: {
          radius: 16,
          color: {
            0.5: '#2c7bb6',
            0.65: '#abd9e9',
            0.7: '#ffffbf',
            0.9: '#fde468',
            1.0: '#d7191c'
          }
        }
      })

      layer.render()
    },
    buildPath() {
      var path = []
      var center = this.map.lngLatToContainer(this.starCenter)
      for (let k = 0; k < 6; k += 1) {
        var ag = ((Math.PI * 60) / 180) * k
        var x = center.x + Math.cos(ag) * 500000
        var y = center.y + Math.sin(ag) * 500000
        path.push((k === 0 ? 'M' : 'L') + x + ' ' + y)
      }
      return path.join(' ') + ' Z'
    },
    onRender() {
      var newPath = this.buildPath()
      this.path.setAttribute('d', newPath)
    },
    async initAMap() {
      try {
        const self = this
        this.amap = await AMap()
        var opts = {
          subdistrict: 0,
          extensions: 'all',
          level: 'city'
        }
        // 利用行政区查询获取边界构建mask路径
        // 也可以直接通过经纬度构建mask路径
        var district = new self.amap.DistrictSearch(opts)
        district.search('宝鸡市', function (status, result) {
          var bounds = result.districtList[0].boundaries
          var mask = []
          for (var i = 0; i < bounds.length; i += 1) {
            mask.push([bounds[i]])
          }
          self.map = new self.amap.Map('container', {
            mask: mask,
            center: [106.864404, 34.892985],
            disableSocket: true,
            viewMode: '3D',
            showLabel: false,
            labelzIndex: 130, // 地图标注显示顺序，大于110即可将底图上的默认标注显示在覆盖物（圆、折线、面）之上。
            pitch: 40, // 俯仰角度，默认0，[0,83]，2D地图下无效 。（自V1.4.0开始支持）
            zoom: 10,
            layers: [
              new self.amap.TileLayer.RoadNet({
                // rejectMapMask:true
              }),
              new self.amap.TileLayer.Satellite()
            ]
          })
          setTimeout(()=>{
            self.map.setZoom(16)
          },3000)
          
          // 添加自定义图层
          self.map.plugin(['AMap.CustomLayer'], function () {
            var size = self.map.getSize()
            var canvas = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
            canvas.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
            canvas.setAttribute('width', size.width)
            canvas.setAttribute('height', size.height)

            self.path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
            self.path.onclick = function () {
              // console.log('svg path clicked')
            }
            var styleText = []
            styleText.push('stroke:#132235')
            styleText.push('fill:#132235')
            styleText.push('fill-opacity:0.6')
            self.path.style.cssText = styleText.join(';')

            canvas.appendChild(self.path)
            var customLayer = new self.amap.CustomLayer(canvas, {
              // zooms: [3, 8],
              alwaysRender: true,
              zIndex: 100
            })
            customLayer.render = self.onRender
            self.map.add(customLayer)
          })

          // 添加高度面
          var object3Dlayer = new self.amap.Object3DLayer({ zIndex: 1 })
          self.map.add(object3Dlayer)
          var height = -8000
          var color = '#0088ffcc' // rgba
          var wall = new self.amap.Object3D.Wall({
            path: bounds,
            height: height,
            color: color
          })
          wall.transparent = true
          object3Dlayer.add(wall)

          // 添加描边
          for (let i = 0; i < bounds.length; i += 1) {
            new self.amap.Polyline({
              path: bounds[i],
              strokeColor: '#99ffff',
              strokeWeight: 4,
              map: self.map
            })
          }
          //养殖企业养殖户
          cultivationEnterprise().then((res) => {
            let data = res.data.rows
            data.map((item) => {
              // const coordinate = JSON.parse(item.coordinate)
              const marker = new self.amap.Marker({
                map: self.map,
                icon: require(item.c_5 / 1 >= 10000
                  ? './../../../assets/img/map/xyyl.png'
                  : item.c_5 / 1 < 1000
                  ? './../../../assets/img/map/xyyz.png'
                  : './../../../assets/img/map/xyyh.png'),
                position: [item.gdLng, item.gdLat],
                zIndex: 301
              })
              marker.on('click', function (e) {
                self.openInfo(e, item)
              })
              self.mapData.push({
                position: [item.gdLng, item.gdLat],
                data: item
              })
            })
            self.setMapCenter()
          })
          // 添加标记点
          // districts().then((res) => {
          //   console.log(res,'地图地址')
          //   const data = res.body.data
          //   // 添加点
          //   // var icon = new self.amap.Icon({
          //   //     size: new AMap.Size(25, 34),
          //   //     image: './../../../assets/img/map/hy.png',
          //   //     imageSize: new AMap.Size(20, 40)
          //   //   });
          //   data.map((item) => {
          //     const coordinate = JSON.parse(item.coordinate)
          //     const marker = new self.amap.Marker({
          //       map: self.map,
          //       icon: require('./../../../assets/img/map/hy1.png'),
          //       position: [coordinate.lng, coordinate.lat],
          //       zIndex: 301
          //     })
          //     marker.on('click', function (e) {
          //       self.openInfo(e, item)
          //     })
          //     self.mapData.push({
          //       position: [coordinate.lng, coordinate.lat],
          //       data: item
          //     })
          //   })
          //   self.setMapCenter()
          // })
        })
      } catch (err) {
        console.error(err)
      }
    },
    setMapCenter() {
      const self = this
      this.time = setTimeout(() => {
        self.map.setCenter(self.mapData[self.showIndex].position)
        // const lnglat = JSON.parse(self.mapData[self.showIndex].data.coordinate)
        const lnglat = {
          Q: self.mapData[self.showIndex].data.gdLat,
          R: self.mapData[self.showIndex].data.gdLng,
          lng: self.mapData[self.showIndex].data.gdLng,
          lat: self.mapData[self.showIndex].data.gdLat
        }
        self.openInfo({ lnglat }, self.mapData[self.showIndex].data)
        // self.map.setZoom(16)
        if (self.showIndex === self.mapData.length - 1) {
          self.showIndex = 0
        } else {
          self.showIndex++
        }
        self.setMapCenter()
      }, 8000)
    },
    openInfo(e, item) {
      const self = this
      const title = item.name
      const content = []
      content.push('<div id="mapEcharts"></div>')
      this.infoWindow = new this.amap.InfoWindow({
        isCustom: true, // 使用自定义窗体
        content: createInfoWindow(title, content.join('<br/>'), self.map, 0),
        offset: new this.amap.Pixel(16, -45)
      })
      this.infoWindow.open(this.map, e.lnglat)
      let dataFilter = [
                { name: "泌乳羊", percent: item.c_1 },
                { name: "种公羊", percent: item.c_2 },
                { name: "青年羊", percent: item.c_3 },
                { name: "羔羊", percent: item.c_4 },
            ];
      setTimeout(() => {
        echarts.registerTheme('themes', theme)
        var myChart = echarts.init(document.getElementById('mapEcharts'), 'themes')
        var option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c}只'
          },
          // title: {
          //   text: (item.primaryProduction + item.secondIndustry + item.thirdIndustry).toFixed(2) + '\n亿元',
          //   x: 'center',
          //   y: '53.5%',
          //   textStyle: {
          //     color: '#E9F7FF',
          //     fontSize: 14
          //   }
          // },
          title: {
            // {
            //   textAlign: 'center',
            //   text: item.c_5,
            //   left: '54%',
            //   top: '30%',
            //   textStyle: {
            //     color: '#fff',
            //     fontSize: 14,
            //     fontFamily: 'myfont'
            //   }
            // },
            // {
            //   textAlign: 'center',
            //   id: 'statistic1',
            //   text: '只',
            //   left: '57%',
            //   top: '36%',
            //   textStyle: {
            //     color: '#3CB5FF',
            //     fontSize: 14,
            //     fontFamily: 'myfont'
            //   }
            // }
            text: item.c_5,
            textAlign: 'center',
            left: '64%',
            top: '28%',
            subtext: "只",
            itemGap: 5,
            textStyle: {
              color: '#fff',
              fontSize: 14,
              fontFamily: 'myfont',
              textShadowColor: '#0650B8',
              textShadowBlur: 12,
              textShadowOffsetY: 1
            },
            subtextStyle: {
              color: '#3CB5FF',
              fontSize: 14,
              fontFamily: 'myfont'
            }
          },
          legend: {
            orient: 'vertical',
            itemGap: 20,
            left: 10,
            top: 30,
            formatter: function(name) {
              let pieLegendVale = ''
               dataFilter.filter((item,index) => {
                    if (item.name == name) {
                          pieLegendVale = item.percent;
                     }
               });
                    return name +"  " + pieLegendVale + "只" ;
               
                        
           },
            data: ['泌乳羊', '种公羊', '青年羊', '羔羊']
          },
          series: [
            {
              name: item.name,
              type: 'pie',
              radius: ['30%', '45%'],
              center: ['65%', '35%'],
              avoidLabelOverlap: false,
              label: {
                show: true,
                position: 'bottom',
                offset: [0, 50],
                formatter: function (params) {
                  // let text = params.name;
                  // let value_format = params.value;
                  // let percent_format = '('+params.percent.toFixed(2) + '%)';
                  // if (text.length <= 4) {
                  //   return `${text}\n${percent_format}`;
                  // } else if (text.length > 4 && text.length <= 12) {
                  //   return text = `${text.slice(0, 4)}\n${text.slice(4)}\n${percent_format}`
                  // }

                  // if (params.name !== '') {
                  //   return params.value + ' 亿元'
                  // } else {
                  //   return ''
                  // }

                  return params.percent + '%'
                }
              },
              labelLine: {
                show: true,
                length: 15,
                length2: 5
              },
              emphasis: {
                label: {
                  show: false,
                  fontSize: '16',
                  fontWeight: 'bold'
                }
              },
              data: [
                // { value: item.c_1, name: `泌乳羊${item.c_1}` },
                // { value: item.c_2, name: `种公羊${item.c_2}` },
                // { value: item.c_3, name: `青年羊${item.c_3}` },
                // { value: item.c_4, name: `羔羊${item.c_4}` }
                { value: item.c_1, name: '泌乳羊' },
                { value: item.c_2, name: '种公羊' },
                { value: item.c_3, name: '青年羊' },
                { value: item.c_4, name: '羔羊' }
              ]
            }
          ]
        }

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
        let echartsBtn = document.getElementById('mapEcharts')
        echartsBtn.onclick = (e) => {
          this.$router.push({path:'environmental-monitoring',query:{id:item.id}})
        }
      }, 100)
    },
    districts(item) {
      this.p2 = new Promise((resolve, reject) => {
        districts().then((res) => {
          resolve(res.body.data)
        })
      })
    },
    atmospheric() {
      atmospheric().then((res) => {
        this.drawLoca(res.body.data)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.h-33 {
  height: 32%;
  background: url(~@/assets/img/bg-img.png) no-repeat;
}
div[data-bottom] {
  background: url(~@/assets/img/gradients-left.png) no-repeat;
  background-size: 100% 100% !important;
}
.h-24 {
  height: 23.2%;
}
.amap-info-contentContainer {
  width: 250px;
}
.font-use {
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  font-size: 20px;
}
.img-100 {
  img {
    height: 100%;
    width: 100%;
  }
}
.bgcxy {
  background: url(~@/assets/img/bgcBanner2.png) no-repeat;
  width: 100%;
  height: 100%;
  background-size: cover;
}
.gradients-left {
  height: 90.9%;
  top: 8.2%;
  z-index: 2;
  width: 36%;
  background: url(~@/assets/img/lxdp/leftBanner.png) no-repeat;
  background-size: 100% 100%;
}
.position-center {
  top: 8.2%;
  width: 46%;
  // color: #fff;
  // font-size: 30px;
  left: 27%;
  z-index: 2;
}
.BMap_bubble_content {
  width: 400px !important;
}
.BMap_bubble_title {
  font-weight: 700 !important;
  margin-bottom: 10px;
  font-size: 16px;
}
.gradients-right {
  right: 0;
  height: 90.9%;
  top: 8.2%;
  z-index: 2;
  width: 36%;
  background: url(~@/assets/img/lxdp/rightBanner.png) no-repeat;
  background-size: 100% 100%;
  background-position: 92% 10.2%;
}
.gradients-bottom {
  z-index: 2;
  width: 28%;
  position: absolute;
  bottom: 0;
  left: 36%;
  height: 20%;
  background: url(~@/assets/img/bg-img.png) no-repeat;
  background-position: 50% 100%;
}
.gradients-bottomTitle {
  z-index: 2;
  width: 28%;
  position: absolute;
  bottom: 2%;
  right: 3%;
  color: #e9f7ff;
  font-size: 14px;
  > p {
    line-height: 25px;
    > span {
      opacity: 0.8;
    }
    > i {
      width: 10px;
      height: 10px;
      display: inline-block;
      background-color: #47bcce;
    }
  }
}

.shuiqiu {
  height: 50%;
  width: 100%;
  display: flex;
  margin-top: 30px;
  > div {
    // padding-top: 10%;
    width: 100%;
    height: 100%;
    &:first-child {
      margin-left: 10%;
    }
    &:last-child {
      margin-right: 10%;
    }
    // .eachers{
    //   height: 500px!important;
    // }
  }
}
.topStyle {
  display: flex;
  justify-content: space-around;
  border: 1px solid #2e5675;
  background: url(~@/assets/img/lxdp/centerjt.png) no-repeat;
  background-size: 100% 100%;
  background-color: rgba(36, 58, 86, 0.3);
  box-sizing: border-box;
  border: 1px red solid !important;
  border-image: linear-gradient(90deg, rgba(60, 181, 255, 0), rgba(60, 181, 255, 1), rgba(60, 181, 255, 0)) 5 10 !important;
  > div {
    width: 33%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-sizing: border-box;

    img {
      // position: relative;
      width: 34px;
      height: 34px;
    }
    > div {
      // position: relative;
      margin-left: 10px;
      color: #e9f7ff;
      > p {
        font-size: 14px;
        &:last-child {
          padding-top: 6px;
          > span {
            background-image: -webkit-linear-gradient(top, #ffffff, #3cb5ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 32px;
            margin-right: 5px;
          }
        }
      }
    }
  }
}
.topContent1 {
  border: 1px solid #2e5675;
  border-top: none;
  border-bottom: none;
  border-image: linear-gradient(180deg, transparent, transparent, rgba(60, 181, 255, 1), transparent, transparent) 0 10 !important;
}
</style>
